<template>
  <div>
    <input type="text" :value="props.modelValue" @input="updateModelValue" />
    <span>子组件：{{ props.modelValue }}</span>
    <hr />
    <input type="text" :value="props.title" @input="updateTitle" />
    <span>子组件：{{ props.title }}</span>
  </div>
</template>

<script setup lang="ts">
type Props = {
  modelValue?: string;
  modelModifiers?: { mySplit: boolean };
  title?: string;
  titleModifiers?: { mySplit: boolean };
};

const props = defineProps<Props>();
let emit = defineEmits(["update:modelValue", "update:title"]);

// 5.使用v-model修饰符
const updateModelValue = (event: any) => {
  let value = event.target.value;
  console.log(value, "value");
  if (props.modelModifiers?.mySplit) {
    value = value.split("");
  }
  emit("update:modelValue", value);
};
const updateTitle = (event: any) => {
  let value = event.target.value;
  if (props.titleModifiers?.mySplit) {
    value = value.split("");
  }
  emit("update:title", value);
};
</script>
